<template>
  <div class="product_show">
    <!-- 我是产品页面 -->
    <!-- categoryId是产品编号 根据点击侧边栏动态的改变 从首页传过来也可 -->
    <!-- 头部 导航栏-->
    <div class="header">
      <van-nav-bar
        title="服务产品"
        left-text="返回"
        @click-left="onclickLeft"
        left-arrow
      >
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>

    <div class="main">
      <!-- 主体部分 左边侧边栏 -->
      <div class="left">
        <van-sidebar v-model="activeKey" @change="Change">
          <van-sidebar-item
            v-for="category in categoryData"
            :key="category.id"
            :title="category.name"
          />
        </van-sidebar>
      </div>
      <!-- 产品动态绑定 右边产品展示栏 -->
      <div class="right">
        <van-card
          v-for="product in productData"
          :key="product.id"
          :price="product.price"
          :desc="product.description"
          :title="product.name"
          :thumb="product.photo"
        >
          <!-- 产品数量的加减 -->
          <template #footer>
            <van-stepper
              default-value="0"
              :min="0"
              v-model="product.number"
              @change="numberChangeHandler(product)"
            />
          </template>
        </van-card>
      </div>
    </div>
    <!-- 提交订单 -->
    <div class="product_submit">
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      //  参数传递的方式 this.$route.query.xxx
      //       侧边栏的索引 点击哪个分类就跳到哪个页面
      activeKey: this.$route.query.activeKey,
      // 首页点击跳到产品页面是 传递的栏目id 首页中定义的categoryId
      categoryId: this.$route.query.categoryId,
    };
  },
  computed: {
    // 获取产品栏目的数据
    ...mapState("category", ["categoryData"]),
    // 获取产品数据
    ...mapState("product", ["productData"]),
    // 购物车总价
    ...mapGetters("shopcart", ["total"]),
  },
  methods: {
    // 引入获取产品栏目数据的方法
    ...mapActions("category", ["getAllCategoryData"]),
    // 引入根据栏目id获取产品数据的方法
    ...mapActions("product", ["getAllProductData"]),
    // 引入购物车模块的方法
    ...mapMutations("shopcart", ["addShopcart", "clearShopcart"]),
    //跳转到产品页面
    onSubmit() {
      this.$router.push({
        //路径
        path: "/manager/paySubmit",
        //参数传递 把数据传到产品页面
        query: {},
      });
    },
    //监听步进器的变化
    numberChangeHandler(product) {
      let orderLine = {
        productId: product.id,
        productName: product.name,
        price: product.price,
        number: product.number,
      };

      this.addShopcart(orderLine);
    },

    Change(index) {
      console.log(index);
      // 通过侧边栏的下表索引来获取对应的数据
      console.log(this.categoryData[index].id);
      //  当侧边栏切换的时候  动态更新categoryId 可以获取到当前页面接口的数据
      //        获取到产品编号 this.categoryData[index].id   9940，9
      this.categoryId = this.categoryData[index].id;

      //       重新刷新页面数据
      this.productShow();
    },
    productShow() {
      let data = {
        page: 1,
        pageSize: 88,
        productCategoryId: this.categoryId,
      };
      // 调用获取产品数据的方法  product模块
      this.getAllProductData(data);
    },

    //获取产品栏目数据 左侧边栏
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 88,
      };
      //  调用产品数据的方法
      this.getAllCategoryData(data);
    },
    onclickLeft() {
      // 返回按钮
      this.$router.go(-1);
    },
  },

  created() {
    //   自动产品数据
    this.productShow();
    //   自动导航栏数据
    this.queryCategory();
  },
};
</script>

<style scoped>
.main {
  display: flex;
}
.van-sidebar {
  width: 150px;
  text-align: center;
}
.main .right {
  flex: 1;
}
.header span {
  text-align: center;
}
</style>